<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { arrowMiddleware, ElMessage,ElMessageBox  } from 'element-plus';
import ExtansionDailog from './components/ExtansionDailog.vue';
import { downloadQRCode,removeReferences,extensionManagementListmgmt,referrerStatusEdit,switchState } from '@/api/ExtensionManage'
const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const miniAppId = import.meta.env.VITE_APP_WEIXINID;
// 弹框组件代码

const dialogVisible = ref(false)
const dialogTitle = ref('')

const changeDialog = (val) => {
    dialogVisible.value = val
}

const successSubmit = (val) => {
   dialogVisible.value = false
   if(val == 'add'){
     seachTable.value.initSearch();
   }else{
     seachTable.value.handlerSearch();
   }
   instance.proxy.$forceUpdate();
}


let backForm = ref({
    referrerName:'', //姓名
    referrerPhone:'', //手机号
    id:''
})


const ContentImg = ref('')


// 新增编辑回退时候刷新列表 
// onActivated(()=>{

//     let closeTagName = sessionStorage.getItem('closeTagName');
//     if(closeTagName == 'pharmacistManageEdit'){
//         seachTable.value.handlerSearch();
        
//     }else if(closeTagName == 'pharmacistManageAdd'){
//         seachTable.value.initSearch();
//     }
//     instance.proxy.$forceUpdate();
//     sessionStorage.removeItem('closeTagName');
// })
const formInline = ref([
    {
      type: "input",
      prop: "queryCondition",
      placeholder: "推广人姓名或手机号",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "状态",
        label: '',
        prop: 'referrerStatus',
        data:[
            {
                label:"启用",
                value:1
            },
            {
                label:"禁用",
                value:0
            }
        ],
        model: [],
	
    }
])

const btnLefts = ref([
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "referrerName",
      label: "推广者姓名",
      minWidth: 110,
    },
    {
      prop: "referrerPhone",
      label: "推广者手机号",
      minWidth: 120,
   
    },
{
      prop: "withdrawAmtCan",
      label: "可提现佣金(元)",
      minWidth: 130,
      sortable:true
    },
    {
      prop: "withdrawAmtWay",
      label: "在途金额(元)",
      minWidth: 120,
       sortable:true
    },
    {
      prop: "referrerNumber",
      label: "推广人数",
      minWidth: 120,
       sortable:true
    },
    {
      prop: "withdrawAmtTotal",
      label: "累计提现金额(元)",
       minWidth: 145,
       sortable:true
    },
    // {
    //   type:'slot',
    //   prop: "referrerStatus",
    //   label: "状态",
    //   slotName:'statusName'
    // },
    {
      prop: "createTime",
      label: "开通时间",
     minWidth: 178,
    },
    {
      type: "action",
      label: "操作",
      minWidth: 100,
      btns: [
        // {
        //   label: () => "禁用",
        //   show:(row)=>{
        //     return true;
        //   },
        //   click: async (row) => {

        //     try {
        //       tableLoading.value = true;
             
            
        //     } catch (error) {
            
        //     }finally{
        //       tableLoading.value = false;
        //     }
        //   },
        // },
        {
          label: () => "详情",
          
          click: async (row) => {
            router.push({name:"PersonalPromotionDetail",query:{id:row.id, referrerName:row.referrerName,userId:row.userId}})
          },
        },
      ],
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);


const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
      let data = {
          ...formInline,
          
        }
        const res = await extensionManagementListmgmt(data)
        console.log(res,'res');
        totalPage.value = Number(res.total);
        tableData.value =  res.records || []
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}
const changeStatue = (val,row) => {
  console.log("切换按钮",val,row)
  switchState({referrerId:row.id,referrerStatus:val})
}


</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          :tableIndex="true"
          @handlerSearch="handlerSearch"
        >
        <template #statusName="{row, index}">
          <el-switch v-model="row.referrerStatus"  @change="(val) => changeStatue(val,row)"/>
        </template>
        </SeachTable>
        <extansion-dailog
        v-if="dialogVisible"
        :dialogVisible="dialogVisible"
        :dialogTitle="dialogTitle"
        :backForm="backForm"
        @changeDialog="changeDialog" 
        @successSubmit="successSubmit"
        ></extansion-dailog>
        
    </div>
</template>


<!-- 删除按钮样式 -->
<style lang="less">
.delete{
    background: #FF2440 !important;
}
</style>